<template>
    <div class="container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="半成品" name="半成品">
                <div class="title">
                    <div class="flex between">
                        <h3>半成品管理</h3>
                        <!-- <el-row style="margin-top:20px;">
                            <el-col :span="7">
                                <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                                    <i slot="prefix" class="el-input__icon el-icon-search" ></i>
                                    <el-button slot="append">搜索</el-button>
                                </el-input>
                            </el-col>

                        </el-row> -->
                        <el-button v-if="!added" @click="addproduction" type="primary">新增生产</el-button>
                    </div>
                </div>
                <div style="font-size: 12px">
                    <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search" ></i>
                        <el-button slot="append" @click="productionSearch">搜索</el-button>
                    </el-input>
                </div>
                <el-table
                    :data="tableData"
                    style="margin-top:20px;"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="productName" sortable label="产品名称"></el-table-column>
                    <!-- <el-table-column prop="id" sortable label="物料代码"></el-table-column> -->
                    <el-table-column prop="batch" sortable label="生产批号"></el-table-column>
                    <el-table-column prop="predictYield" sortable label="成品数量">
						<template slot-scope="scope">
							{{scope.row.totalNumber}}{{scope.row.units}}
						</template>

					</el-table-column>
                    <el-table-column prop="technology" label="工艺工序"></el-table-column>
                    <el-table-column prop="createtime" label="生产时间"></el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <!-- <template v-if="!added">
                            <el-button
                                type="text"
								v-if="scope.row.surplusNumber != 0"
                                @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button>
                            </template> -->
                            <el-button
                                v-if="check"
                                type="text"
                                @click="gotocheck(scope.$index, scope.row)"
                            >查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize"
                    :current-page.sync="currentPage"
                    :total="total"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px"
                ></el-pagination>

                <!-- 弹出选择 -->
                <el-dialog title="请填写收款信息" :visible.sync="dialogVisible">
                    <el-form style="padding-left: 20px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="收款时间：">
                                    <el-date-picker
                                        v-model="receiveTime"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder
                                        style="width: 300px"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="收款金额：">
                                    <el-input placeholder="请输入内容" v-model="payAmount" style="width: 200px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="付款方式：">
                                    <el-select v-model="payType" placeholder="请选择" style="width: 200px">
                                        <el-option :label="v" :value="v" v-for="(v, i) in ruleForm.paytypes" :key="i"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="update">确定</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>



<!--             成品信息                  -->

            <el-tab-pane label="成品" name="成品">
                <div class="title">
                    <div class="flex between">
                        <h3>成品管理</h3>
                        <!-- <el-row style="margin-top:20px;">
                            <el-col :span="7">
                                <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                                    <i slot="prefix" class="el-input__icon el-icon-search" ></i>
                                    <el-button slot="append">搜索</el-button>
                                </el-input>
                            </el-col>

                        </el-row> -->
                        <el-button v-if="!added" @click="addproduction" type="primary">新增生产</el-button>
                    </div>
                </div>
                <div style="font-size: 12px">
                    <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search" ></i>
                        <el-button slot="append" @click="productionSearch">搜索</el-button>
                    </el-input>
                </div>
                <el-table
                    :data="tableData1"
                    style="margin-top:20px;"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="productName" sortable label="产品名称"></el-table-column>
                    <!-- <el-table-column prop="id" sortable label="物料代码"></el-table-column> -->
                    <el-table-column prop="batch" sortable label="生产批号"></el-table-column>
                    <el-table-column prop="predictYield" sortable label="成品数量">
						<template slot-scope="scope">
							{{scope.row.totalNumber}}{{scope.row.units}}
						</template>

					</el-table-column>
                    <el-table-column prop="technology" label="工艺工序"></el-table-column>
                    <el-table-column prop="createtime" label="生产时间"></el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <!-- <template v-if="!added">
                            <el-button
                                type="text"
								v-if="scope.row.surplusNumber != 0"
                                @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button>
                            </template> -->
                            <el-button
                                v-if="check"
                                type="text"
                                @click="handleView(scope.$index, scope.row)"
                            >查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize"
                    :current-page.sync="currentPage1"
                    :total="total1"
                    @current-change="handleCurrentChange1"
                    style="margin-top: 20px"
                ></el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
// import { order_findByList, order_delete, order_update } from '@/request/api';
import { productionManagement_inquire, productionManagement_search, productionManagement_delete,manage_getProcessDetail } from '@/request/produceApi';
export default {
    data() {
        return {
            searchName: '',
            time: '',
            payType: '',
            payAmount: '',
            receiveTime: '',
            activeName: '半成品',
            tableData: [],
            tableData1: [],
            queryForm: {
                time: '',
                page: 1
            },
            pagesize: 10,
            total: 10,
          total1:10,
          page1:1,
            currentPage: 1,
            dialogVisible: false,
            ruleForm: {
                paytype: '',
                paytypes: ['现金', '银行转账', '微信', '支付宝']
            },
            collectionRecord: {},
            state: '',
            start: '',
            end: '',
            added: false,
            check: true,
            details: true,
            modify: true,
            deletes: true,
            addcollection: true,
          currentPage1:1
        };
    },
    created() {},
    mounted() {
        this.init();
        this.judgmentAuthority();
    },
    methods: {
        //查看
        gotocheck(){
            this.$router.push({
                    path:'/productionManagement/update'
                })
        },
        search() {
            this.start = this.time[0];
            this.end = this.time[1];
            this.currentPage = 1;
            this.init();
        },
        close() {
            this.dialogVisible = false;
            this.payAmount = '';
            this.payType = '';
            this.receiveTime = '';
        },
        addCollectionRecord(ele) {
            this.dialogVisible = true;
            this.collectionRecord = ele;
        },
        // 添加收款记录
        update() {
            this.collectionRecord.payType = this.payType;
            this.collectionRecord.payAmount = this.payAmount;
            this.collectionRecord.receiveTime = this.receiveTime;
            order_update(this.collectionRecord).then((res) => {
                this.$notify({
                    title: '提示',
                    message: '操作成功',
                    type: 'success'
                });
                this.init();
                this.payType = '';
                this.payAmount = '';
                this.receiveTime = '';
            });
        },

        // 删除
        handleDelete(index,row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let deleteData = {
                    produceManage: {}
                }
                deleteData.produceManage.id = row.id
                deleteData.produceManage.user_id = row.user_id
                deleteData.produceManage.company_id = row.company_id
                deleteData.produceManage.createtime = row.createtime
                deleteData.produceManage.manageName = row.manageName
                deleteData.produceManage.materialId = row.materialId
                deleteData.produceManage.specification = row.specification
                deleteData.produceManage.predictYield = row.predictYield
                deleteData.produceManage.type = row.type
                deleteData.produceManage.technologyId = row.technologyId
                productionManagement_delete(deleteData).then((res) => {
                    this.$notify({
                        title: '操作成功',
                        message: '删除成功',
                        type: 'success'
                    });
                    if (this.activeName == '半成品') {
                        this.init();
                    }
                    if (this.activeName == '成品') {
                        this.init1()
                    }
                });
            });
        },
        init() {
            let data = {
                page: this.currentPage,
                type: '半成品'
            };
            //查看生产管理
            manage_getProcessDetail(data).then((res) => {
                // console.log(res,'1111');
                this.tableData = res.rows;
                this.total = res.total;
            });
        },
        init1() {
            let data = {
                page: this.currentPage,
                type: '成品',


            };
            //查看生产管理
            manage_getProcessDetail(data).then((res) => {
                // console.log(res,'1111');
                this.tableData1 = res.rows;
                this.total = res.total;
            });
        },
        productionSearch() {
            if (this.activeName == '半成品') {
                let searchData = {
                  searchName: this.searchName,
                    type: '半成品',
                  page:this.page
                }
                productionManagement_search(searchData).then((res) =>{
                  this.tableData = res.rows;
                  this.total = res.total;
                })
            }
            if (this.activeName == '成品') {
                let searchData = {
                  searchName: this.searchName,
                    type: '成品',
                  page:this.page1
                }
                productionManagement_search(searchData).then((res) =>{
                  this.tableData = res.rows;
                  this.total = res.total;
                })
            }
        },
        //新增生产
        addproduction() {
            this.$router.push({
                path: '/productionManagement/added'
            })
        },
        handleClick(val) {
            this.currentPage = 1;
            this.start = '';
            this.end = '';
            this.time = '';
            if (this.activeName == '半成品') {
                this.state = 1;
                this.init();
            }
            if (this.activeName == '成品') {
                this.state = 2;
                this.init1()
            }
            // console.log(val)
        },
        // getTime(){
        //   console.log(this.queryForm.time);
        // },
        handleCurrentChange() {
          this.currentPage = val
          this.init()
        },
      handleCurrentChange1() {
        this.currentPage1 = val
        this.init1()
      },
        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem('panduanzhuangtai'))
            type.map((item1) => {
                if (item1.name == '生产管理' && item1.children != null) {
                    for (var i = 0; i < item1.children.length; i++) {
                        if (item1.children[i].name == '新增') this.added = false;
                        if (item1.children[i].name == '订单详情') this.details = false;
                        if (item1.children[i].name == '修改') this.modify = false;
                        if (item1.children[i].name == '删除') this.deletes = false;
                        if (item1.children[i].name == '添加收款记录') this.addcollection = false;
                    }
                }
            });
        }
    }
};
</script>
<style scoped>
.height {
    min-height: 140px;
}
.el-pagination {
    text-align: center;
}
.flex {
    display: flex;
}
.column {
    flex-direction: column;
}
.center {
    justify-content: center;
    align-items: center;
}
.between {
    justify-content: space-between;
}
.around {
    justify-content: space-around;
}
.containers {
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.table {
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>
